<template>
  <div class="qj clear">
    <div class="top clear">
      <div class="head clear">
        <div class="head-left clear">
          <strong>
            <i class="i"></i>
            <span class="strong">SAP文库</span>
          </strong>
          <span class="dian">
            <a>主页 ></a>SAP文库
          </span>
        </div>
        <div class="head-right clear">
          <img @click="imcroc" src="../../assets/cty-image/02.jpg" />
        </div>
      </div>
    </div>
    <div class="banx clear">
      <div  class="col  clear">
        <div  class="center clear" style>
          <ul  style="  overflow:hidden;">
            <li
              v-for="(item,index) in libList"
              :key="index"
              class="ic1"
              style="width:50%;float:left;display:block;list-style:none;margin:0px;padding:3px 10px 3px 10px;font-size:12px;color:#808080"
            >
              <span
                style="float: left;  margin-top:2px;margin-right:5px;padding:4px 6px"
                class="label pad label-info"
              >{{item.assort}}</span>

              <a
                style="float: left;text-decoration: none;"
                href="#"
              >{{item.brief}}</a>
              <i
                class="ace icon iconfont icon-fire"
                style="float:right;color:#808080;font-size:10px;margin-right:12px;"
              >{{item.pageviews}}</i>
            </li>
          </ul>
          <!-- <ul>
          <li @click=" getLibiaryList(1)">1</li>
          <li @click=" getLibiaryList(2)">2</li>
          <li @click=" getLibiaryList(3)">3</li>
          <li @click=" getLibiaryList(4)">4</li>
          </ul>-->
          <el-pagination
            :page-size="50"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="total "
          ></el-pagination>
        </div>
      </div>
      <div class="col-sm-3 hidden-xs" style="padding:0px;float:left;margin:-5px 0 0 8px">
        <div
          class="col-sm-12 hidden-xs clear"
          style="background-color:#fff;margin-top:10px;padding:10px 5px 0px 5px;border:solid;border-color:#e7e7e7;border-width:1px">
          <div
            class="col-sm-12 clear"
            style="margin-bottom:5px;padding:5px 5px 10px 5px;border-bottom-style:solid;border-bottom-color:#e7e7e7;border-bottom-width:1px">
            <span
              style="padding-bottom:10px;margin-bottom:-10px;border-bottom-color:#f98181;border-bottom-style:solid;border-bottom-width:2px;font-size:14px">
              <strong>
                <a href="/pj" target="_blank">热门图书</a>
              </strong>
            </span>
          </div>
          <!-- <div id="container" class="col-sm-12" style="padding:0px">
            <div class="col-sm-6" style="margin:0px;padding:5px 5px 0px 5px;">
                    <a href="/1.html" style="font-size:12px">
                        <img src="picture/6362395811083882045217056.jpg" class="img-responsive" />
                        《Kill SAP FICO》from SAP刀客
                    </a>
            </div>
          </div>-->
          <!-- 瀑布流 -->
          <waterfall
            style="height: 100%;"
            :col="col"
            :width="itemWidth"
            :gutterWidth="gutterWidth"
            :data="imgList"
          >
            <template>
              <div
                id="container"
                class="col-sm-10"
                style="padding:0px"
                v-for="item in imgList"
                :key="item.id"
              >
                <div class="col-sm-6" style="margin:0px;padding:5px 5px 0px 5px;">
                  <a href="#" style="font-size:12px;display: inline-block;width:127px">
                    <img :src="item.src" style="width:140px  " class="img-responsive" />
                    <span style="width:100%">{{item.title}}</span>
                  </a>
                </div>
              </div>
            </template>
          </waterfall>
        </div>
      </div>
    </div>
    <div
      class="footer"
      style=" text-align: center;height:100px;background-color:#2e2e2e;font-size:14px;"
    >
      本站所有电子书全部来自于互联网，欢迎大家给小编投稿+V:FICODK
      <p>
        © 2018 All Rights Reserved by SAPDOC.cn. |
        <a href="http://www.miitbeian.gov.cn/" style="color:#e5e5e5;font-size:14px">沪ICP备17005776号-3</a>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 瀑布流布局
      itemWidth: null,
      gutterWidth: 5,
      col: 2,
      imgList: [],
      libList: [],
      querys: {
        querys: "",
        pagenum: 1,
        pagesize: 50
      },
      total: 0
    };
  },
  methods: {
    imcroc(){
      this.$router.push('/push')
    },
    async getLibiaryList() {
      // 发起请求  拿到文库内容
      const { data: res } = await this.$axios.get("/library", {
        params: this.querys
      });
      this.libList = res.data;
      this.total = Number(res.total[0].total);
    },
    handleSizeChange(size) {
      this.querys.pagesize = size;
      this.getLibiaryList();
    },
    handleCurrentChange(num) {
      // console.log(this.querys.pagenum);
      this.querys.pagenum = num;
      // console.log(this.querys.pagenum);
      this.getLibiaryList();
    },
    async getImages() {
      // 发起请求  获取瀑布流数据
      const { data: res } = await this.$axios.get("/librarys");
      // 修改图片路径
      res.data.forEach(item => {
        item.src = item.src.replace(
          "../../assets",
          "http://127.0.0.1:8989/public/images"
        );
      });

      this.imgList = res.data;
      // console.log(res);
    }
  },
  created() {
    this.getLibiaryList();
    this.getImages();
  }
};
</script>


<style scoped>
.banx {
  width: 1170px;
  height: 1100px;
  margin: 0 auto;
}
.ace {
  float: right;
  color: #808080;
  font-size: 10px;
  margin-right: 12px;
  margin-top: 5px;
}
.ic1 {
  width: 50%;
  float: left;
  display: block;
  list-style: none;
  margin: 0px;
  padding: 3px 10px 3px 0px;
  font-size: 12px;
  color: #808080;
}
.glyphicon {
  float: right;
  margin-left: 20px;
}

.label-inline {
  background-color: #5bc0de;
  display: inline;
  padding: 0.2em 0.6em 0.3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25em;
}
a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}
.strong {
  font-size: 18px;
}
.qj {
  width: 100%;
  background-color: #fcf8e3;
}
.top {
  width: 100%;
  height: 73px;
  background-color: #ffffff;
  border-bottom: 1px solid;
  border-bottom-color: #e7e7e7;
}

body {
  background-color: rgb(252, 248, 227);
}

.head {
  background-color: #ffffff;
}
.col {
  margin: 0px;
  padding: 10px 0px 10px 0px;
  /* background-color: #fff; */
  /* border: solid;
  border-color: #e7e7e7; */
  /* border-width: 1px; */
}
.center {
  margin: 0px;
  padding: 10px 0px 10px 0px;
  background-color: #fff;
  border: solid;
  border-color: #e7e7e7;
  border-width: 1px;
}
.center {
    margin: 0px;
    padding: 10px 0px 10px 0px;
    background-color: #fff;
    border: solid;
    border-color: #e7e7e7;
    border-width: 1px;
}

.w-font {
  position: relative;
  top: 18px;
  left: -200px;
  font-size: 10px;
}

.colo-w {
  color: #ffffff;
}

.c-bottom {
  width: 100%;
  height: 120px;
  color: #ccc;
  background-color: rgb(46, 46, 46);
  text-align: center;
  padding-top: 30px;
}
.clear {
  clear: both;
}
.center {
  width: 843px;
  /* height: 1130px; */
  float: left;
  /* margin-left: 190px; */
  text-align: center;
  margin-top: 15px;
  border: 1px solid;
  border-color: #e7e7e7;
}

.label {
  background-color: skyblue;

  display: inline;
  padding: 0.2em 0.6em 0.3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25em;
}

.rig {
  position: relative;
  right: 423px;
  float: right;
  top: 22px;
  font-size: 10px;
}

.content {
  width: 760px;
  height: 100px;
}

.head {
  width: 1170px;
  height: 72px;
  margin: auto;
}

.head-left {
  width: 665px;
  height: 72px;
  float: left;
  position: absolute;
  margin-left: 15px;
}

.head-right {
  width: 475px;
  height: 58px;
  float: right;
  margin-top: 10px;
}

.i {
  width: 25px;
  height: 25px;
  display: inline-block;
  background-image: url(../../assets/cty-image/01.jpg);
  background-size: 100% 100%;
  position: relative;
  top: 6px;
  left: 0px;
}

.dian {
  position: relative;
  top: 30px;
  left: -98px;
  font-size: 14px;
}
.footer {
  padding-top: 30px;
  text-align: center;
  color: #999999;
}

.el-pagination {
  text-align: center;
}
</style>